<template>
  <xn-form-container
    :title="formData.ID ? '编辑生产批次型号' : '新增生产批次型号'"
    :width="550"
    :visible="visible"
    :destroy-on-close="true"
    @close="onClose"
  >
    <a-form
      style="height: 100vh; overflow: auto"
      ref="formRef"
      :model="formData"
      :rules="formRules"
      layout="vertical"
    >
      <a-form-item label="产品型号" name="PMID">
        <a-select
          v-model:value="formData.PMID"
          style="width: 100%"
          placeholder="请选择产品型号"
          :options="productModel"
          @change="handlePMIDChange"
        ></a-select>
      </a-form-item>
      <a-form-item label="本型号预生产的产品数量" name="Num">
        <a-input
          v-model:value="formData.Num"
          placeholder="请输入本型号预生产的产品数量"
          allow-clear
        />
      </a-form-item>
      <a-form-item label="每托盘的产品数量" name="NumPerTuoPan">
        <a-input
          v-model:value="formData.NumPerTuoPan"
          placeholder="请输入每托盘的产品数量"
          allow-clear
        />
      </a-form-item>
      <a-form-item label="预生产的产品起始编号" name="StartSN">
        <a-input
          v-model:value="formData.StartSN"
          placeholder="请输入预生产的产品起始编号"
          allow-clear
        />
      </a-form-item>
    </a-form>
    <template #footer>
      <a-button class="xn-mr8 mr10" @click="onClose">关闭</a-button>
      <a-button type="primary" @click="onSubmit">{{
        formData.ID ? "确认修改" : "确认新增"
      }}</a-button>
    </template>
  </xn-form-container>
</template>

<script setup>
import { required } from "@/utils/formRules";
import productbatchmgrApi from "@/api/productManagement/productbatchmgrApi";
import productmodelmgrApi from "@/api/productManagement/productmodelmgrApi";

import XnFormContainer from "@/components/XnFormContainer/index.vue";
import dayjs from "dayjs";
import { watch } from "vue";
import {
  transitionTime,
  getPreviousMonthDateTime,
  getCurrentDateTime,
} from "@/utils/time.js";
import { message } from "ant-design-vue";
const dayFormat = "YYYY/MM/DD HH:mm:ss";
// 这里props传过来的是批次的id,即pbid
const props = defineProps({
  id: String,
});
// 默认是关闭状态
const visible = ref(false);
const emit = defineEmits({ successful: null });
const formRef = ref();

// 表单数据
const formData = ref({
  time: [],
});
// 打开抽屉
const onOpen = (record) => {
  visible.value = true;
  if (record) {
    formData.value = Object.assign({}, record);
  } else {
    formData.value = {};
  }
};
// 关闭抽屉
const onClose = () => {
  formRef.value.resetFields();
  visible.value = false;
};

// 默认要校验的
const formRules = {
  PMID: [required("请选择产品型号")],
  Num: [required("请输入本型号预生产的产品数量")],
  NumPerTuoPan: [required("请输入每托盘的产品数量")],
  StartSN: [required("请输入预生产的产品起始编号")],
};

// 验证并提交数据
const onSubmit = () => {
  // 有ID 则为修改，无ID为新增
  if (formData.value.ID) {
    formRef.value
      .validate()
      .then(() => {
        productbatchmgrApi
          .modifyProductBatchModel({
            // 批次id需要通过上级传入,
            ID: parseInt(formData.value.ID),
            PBID: parseInt(props.id),
            PMID: parseInt(formData.value.PMID),
            Num: parseInt(formData.value.Num),
            NumPerTuoPan: parseInt(formData.value.NumPerTuoPan),
            StartSN: formData.value.StartSN,
          })
          .then(() => {
            onClose();
            message.success("修改成功");
            emit("successful");
          });
      })
      .catch(() => {});
  } else {
    formRef.value
      .validate()
      .then(() => {
        productbatchmgrApi
          .addProductBatchModel({
            // 批次id需要通过上级传入,
            PBID: parseInt(props.id),
            PMID: parseInt(formData.value.PMID),
            Num: parseInt(formData.value.Num),
            NumPerTuoPan: parseInt(formData.value.NumPerTuoPan),
            StartSN: formData.value.StartSN,
          })
          .then(() => {
            onClose();
            message.success("新增成功");
            emit("successful");
          });
      })
      .catch(() => {});
  }
};

// 调用这个函数将子组件的一些数据和方法暴露出去
defineExpose({
  onOpen,
});
// 产品型号下拉框数据

let productModel = ref([]);
const fetchProductModel = () => {
  productmodelmgrApi
    .getProductModels({
      ID: 0,
      PMName: "",
      PMNo: "",
      PTID: 0,
    })
    .then((res) => {
      productModel.value = res.Data.map((i) => {
        return {
          label: i.PMName,
          value: i.ID,
          num: i.NumPerTuoPan,
        };
      });
    });
};
watch(
  () => visible.value,
  (n, o) => {
    if (!n) return;
    fetchProductModel();
  }
);
const handlePMIDChange = (e, record) => {
  formData.value.NumPerTuoPan = record.num;
};
</script>
